<template>     <!-- 搜索商品 -->
  <div class="demo-image__placeholder">
   <center> <h3 v-if="lists.length==0" style="color:red;">暂无此商品请联系管理员添加</h3>
       </center>  
    <el-row>
      <el-col
        style="width: 20%; height: 20%"
        :span="2"
        v-for="(list, index) in lists"
        :key="index"
      >
        <router-link
          :to="'/com?id=' + list.cmId"
          tag="span"
          active-class="current"
        >
          <el-card body-style="{  '0px' }">
            <img :src="list.cmImg" class="image" />
            <el-badge value="" class="item" type="danger ">
              <div style="padding: 24px">
                <center>
                  <span>{{ list.cmName }}</span>
                  <el-tag type="danger" effect="dark"
                    >￥:{{ list.cmPrice }}元</el-tag
                  >
                </center>
                <br />
                <span>{{ list.cmSubtitle }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ list.createTime }}</time>
                </div>
              </div></el-badge
            >
          </el-card>
        </router-link>
      </el-col>
    </el-row>
    <center>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :v-model="page"
        @current-change="currentChage"
        :prev-click="currentChage"
      >
      </el-pagination>
    </center>
  </div>
</template>



<script>
import index from "@/api/comm";
export default {
  data() {
    return {
      lists: [],
      drawer: false,
      activeIndex: "1",
      activeIndex2: "1",
      currentDate: new Date(),
      search: "",
      page: 1,
      size: 20,
      key: "",
      pages: 0,
      total: 0,
    };
  },
  created() {
     this.key=  this.$route.query.search 
    this.getList(this.page, this.size, this.key);
    this.lists = ["https://i03piccdn.sogoucdn.com/37c7aff5568041ee"];
    this.ElementAlert();
  },
  methods: {
    //弹窗提示
    ElementAlert() {
      this.$notify.success({
        title: "提示！",
        message: "欢迎来到商品搜索区",
        showClose: true,
        duration: 2000,
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getList(page, size, key) {
      index.getListss(page, size, key).then((res) => {
        console.log(res);
        this.lists = res.data.data.list;
        this.page = res.data.data.page;
        this.size = res.data.data.size;
        this.pages = res.data.data.pages;
        this.total = res.data.data.total;
      });
    },
    currentChage(e) {
      this.getList(e, this.size, this.key);
    },
  },

  //事件监听
  watch: {
    //路由监听
    $route(to, from) {
       console.log("******")
       this.key=  this.$route.query.search 
           this.getList(this.page, this.size, this.key);
    },
  },
   
};
</script>

<style>
.top-ioc {
  position: relative;
  margin-right: 10px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>